import Link from "next/link"

export type TopNavBlockProps = {
    name: string,
    href: string,
    active?: boolean
}[]

export default function TopNav({ blocks, id }: { blocks: TopNavBlockProps, id: string }) {
    return <div style={{
        display: 'flex',
        justifyContent: 'space-around',
        borderBottom: '1px solid #ccc',
        marginLeft: 0,
        marginRight: 0,
        padding: '0.5pc'
    }}>
        {blocks.map((block, i) => <Link style={{
            color: block.active ? 'red' : 'black',
        }} href={block.href} key={'nav-top-' + id + '-' + i} className='no-line' >
            <span>{block.name}</span>
        </Link>)}
    </div>
}